<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ style: { width: '120px' } }"
    autocomplete="off"
    @finish="onFinish"
  >
    <a-form-item
      label="申请标题"
      name="title"
      :rules="[{ required: true, message: '请输入申请标题!' }]"
    >
      <a-input
        v-model:value="formState.username"
        placeholder="请输入申请标题!"
      />
    </a-form-item>

    <a-row>
      <a-col :span="12">
        <a-form-item label="申请人" name="uploadUser">
          <a-input v-model:value="formState.username" /> </a-form-item
      ></a-col>
      <a-col :span="12">
        <a-form-item label="申请时间" name="uploadTime">
          <a-input v-model:value="formState.username" /> </a-form-item
      ></a-col>
    </a-row>

    <a-form-item label="留言是否展示" name="isShow">
      <a-radio-group :value="'0'" button-style="solid">
        <a-radio-button value="0">公开展示</a-radio-button>
        <a-radio-button value="1">不公开展示</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item
      label="申请理由"
      name="isShow"
      :rules="[{ required: true, message: '请输入申请理由!' }]"
    >
      <a-textarea
        v-model:value="formState.username"
        placeholder="请输入申请理由!"
        :auto-size="{ minRows: 6, maxRows: 6 }"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 22, span: 2 }">
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};
</script>

<style scoped></style>
